<template>
  <div>
    <MBX Biao="商品管理" Biao1="商品分类"></MBX>

    <el-card class="mt">
      <el-button type="primary" class="mt" @click="addFl">添加分类</el-button>

      <tree-table
        class="mt"
        :data="tableData1"
        :columns="columns"
        :selection-type="false"
        :expand-type="false"
        show-index
        index-text="#"
        border
        :show-row-hover="false"
        style="margin-top: 15px"
      >
        <template slot="isok" slot-scope="scope">
          <i
            class="el-icon-success"
            v-if="scope.row.cat_deleted === false"
            style="color: lightgreen"
          ></i>
          <i class="el-icon-error" v-else style="color: red"></i>
        </template>

        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.cat_level === 0">一级</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.cat_level === 1"
            >二级</el-tag
          >
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>

        <template slot="opt" slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" size="mini" @click="editFl(scope.row)">编辑</el-button>
          <el-button type="danger" icon="el-icon-delete" size="mini" @click="delone(scope.row.cat_id)">删除</el-button>
        </template>
      </tree-table>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="querInfo.pagenum"
        :page-sizes="[5, 7, 9]"
        :page-size="querInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!--  -->

      <!-- 添加分类弹框 -->
      <el-dialog @close="chongZhi" title="添加分类" :visible.sync="dialogFormVisible">
        <el-form :model="form" :rules="rules">
          <el-form-item label="分类名称" label-width="80px" prop="cat_name">
            <el-input v-model="form.cat_name" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item prop="cat_level" label="父级分类" label-width="80px">
            <span>{{ checkedArr }}</span>
            <el-cascader
              ref="goodsRef"
              v-model="checkedArr"
              :options="goodsEjArr"
              :props="addProps"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addGoodsFl">确 定</el-button>
        </div>
      </el-dialog>
      <!--  -->

      <!-- 编辑的弹框 -->
      <el-dialog title="编辑分类" :visible.sync="dialogFormVisiblebj">
        <el-form :model="formbj">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="formbj.cat_name" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisiblebj = false">取 消</el-button>
          <el-button type="primary" @click="EditFl">确 定</el-button>
        </div>
      </el-dialog>
      <!--  -->
    </el-card>
  </div>
</template>

<script>
import { getgoodscategoriesApi, getCatel, getShangPingFengLei ,editFengLei,delOneFl} from "@/http/api";
export default {
  data() {
    return {
      //添加弹框
      dialogFormVisible: false,
      dialogFormVisible: false,
      dialogFormVisiblebj:false,
      tableData1: [],
      checkedArr: [], //选中的父级分类的数组
      goodsEjArr: [], //二级分类数据的数组
      addProps: {
        expandTrigger: " hover	",
        value: "cat_id",
        children: "children",
        label: "cat_name",
        checkStrictly: true,
      },
      form: {
        //添加分类的对象
        cat_pid: "",
        cat_name: "",
        cat_level: "",
      },
      formbj:{  //编辑分类的对象
         cat_id:'',
         cat_name:''
      },
      formLabelWidth: "80px",
      querInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
      columns: [
        {
          label: "分类名称",
          prop: "cat_name",
        },
        {
          label: "是否有效",
          type: "template",
          template: "isok",
        },
        {
          label: "排序",
          type: "template",
          template: "order",
        },
        {
          label: "操作",
          type: "template",
          template: "opt",
        },
      ],
      rules: {
        cat_name: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        cat_level: [
          { required: true, message: "请输入父级分类", trigger: "blur" },
          // { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
    };
  },
  created() {
    this.getlist();
  },
  components: {},
  computed: {
    zuihouId() {
      return this.checkedArr[this.checkedArr.length - 1];
    },
  },
  methods: {
    //删出分类
    async delone(id){
       const res=await this.$confirm('你敢删我, 嗯?', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).catch((error) => {
          this.$message({
            type: 'error',
            message: '已取消删除'
          });          
        })

       if(res==='confirm'){
          //调用封装的删除接口
          await delOneFl(id);
          console.log("删除单个数据", res);
          this.getlist();
        }

    },
    //确定后提交分类
    async EditFl(){
       const {cat_id,cat_name}=this.formbj
       const res= await editFengLei(cat_id,cat_name)
       //刷新页面
       this.getlist();
       //影藏编辑分类对话框
       this.dialogFormVisiblebj=false
    },
    //编辑分类
    editFl(row){
      console.log('编辑数据提交啦',row);
      this.dialogFormVisiblebj = true; 
      this.formbj.cat_name=row.cat_name
      this.formbj.cat_id=row.cat_id


    },
    //重置添加分类对话框，清空
    chongZhi() {
      //Dialog 关闭的回调 即弹框关闭的回调函数
      console.log("清空添加分类对话框");
      this.checkedArr = []; //将选中的父级分类的数组
      this.form = {}; //将添加分类的对象清空  即数据源
    },
    //确定提交添加分类名称
    async addGoodsFl() {
      if (this.checkedArr.length !== 0) {
        this.form.cat_pid = this.zuihouId;
        this.form.cat_level = this.checkedArr.length;
      } else {
        this.form.cat_pid = 0;
        this.form.cat_level = 0;
      }
      console.log("我需要的3三个参数", this.form);
      //调用添加分类接口
      const res = await getShangPingFengLei(this.form);
      console.log("商品分类添加上了", res);

      //刷新页面
      this.getlist();
      //隐藏添加分类对话框
      this.dialogFormVisible = false;
    },
    //级联选择器改变时触发
    handleChange() {
      console.log("获取dom", this.$refs.goodsRef);
      this.$refs.goodsRef.dropDownVisible = false;
    },
    //添加分类
    async addFl() {
      this.dialogFormVisible = true;
      const res = await getCatel("2");
      console.log("二级分类数据", res);
      this.goodsEjArr = res;
    },

    
    handleSizeChange(val) {
      console.log(val);
      this.querInfo.pagesize = val;
      this.getlist();
    },
    handleCurrentChange(val) {
      console.log(val);
      this.querInfo.pagenum = val;
      this.getlist();
    },
    getlist() {
      getgoodscategoriesApi(this.querInfo).then((res) => {
        console.log("数据渲染", res);
        this.total = res.total;
        this.tableData1 = res.result;
      });
    },
  },
};
</script>

<style>
  
 .el-radio {
    position: absolute;
    width: 100%;
    height: 24px;
    margin-left: -20px;
}

.el-radio__inner {
    display: none;
}  

</style>

<style scoped>
.el-icon-success {
  color: green;
}

.el-icon-error {
  color: rgb(182, 3, 3);
}

.el-input,.el-cascader {
    width:80%;
}
/* .el-cascader {
  display: initial;
  position: relative;
  font-size: 14px;
  line-height: 40px;
}

.el-dialog {
  position: absolute;
  width: 100%;
  margin-left: -20px;
  height: 30px;
}
.el-radio__inner {
  display: none;
  background-color: none;
} */
</style>
